/* 详情页面设置 */


const courseId = window.location.href.split('?')[1].split('=')[1];

$.ajax({
    url: `https://showme2.myhope365.com/online_course/pc/course/detail/${courseId}`,
    type: 'get',
    success: (res) => {
        // console.log(res);
        if (res.code == 0) {
            /* 课程上半图片标题介绍 */
            // console.log(res.data);

            $(".course-detail-main-container").append(`
                                <div class="introdcut-container">
                    <div class="intro-left">
                        <img src="./image/产品图1-1831543725516390400.jpg" alt="">
                    </div>
                    <div class="intro-right">
                        <div class="detail-title">${res.data.courseTitle}</div>
                        <div class="detail-info">
                            <div class="detail-info-first-line">
                                <div>累计1590人学习</div>
                                <!-- 评级 -->
                                <span>
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                </span>
                            </div>
                            <div class="detail-price-info">
                                <div class="detail-price-box">
                                    <div class="detail-free-font">${res.data.isFree == 1 ? '免费' : ''}</div>
                                    <div class="detail-new-price">${res.data.isFree == 0 && res.data.isDiscount == 1 ? `￥${res.data.discountPrice}` : ''}</div>
                                    <div class="detail-old-price">${res.data.isFree == 0 && res.data.isDiscount == 1 ? `￥${res.data.coursePrice}` : ''}</div>

                                </div>
                                <span class="detail-time-limit">${res.data.isFree == 0 && res.data.isDiscount == 1 ? '限时钜惠' : ''}</span>
                            </div>
                            <div class="detail-btn-box">
                                <button class="deatil-watch-btn">立即观看</button>
                                <button class="detail-add-btn">加入购物车</button>
                            </div>
                        </div>
                    </div>
                    <div class="collection">
                        <img src="./image/sm-star.png" alt="">
                        <span>收藏</span>
                    </div>
                </div>
                `)

            /* 课程详情 */
            $(".course-detail-main-container").append(`
                <div class="course-deatil-container">
                    <div class="course-detail-container-nav-line">
                        <div class="course-description my-border-bottom">课程描述</div>
                        <div class="course-content">目录</div>
                        <div class="course-remark">评论</div>
                    </div>
                    <div class="course-description-box" >
                        <p>
                            ${res.data.courseDetail}
                        </p>

                    </div>
                    <div class="course-content-box" style="display: none">
                    </div>
                    <div class="course-remark-box" style="display: none"></div>

                </div>
                `)
            const sections = res.data.sections;


            sections.forEach((item, index) => {
                // console.log(index);

                /* 遍历章节，添加章节的框架 */
                $(".course-content-box").append(`
                        <div class="course-section" id="course-section-${index}">
                            <div class="section-title-line">
                                <div class="section-title">${index + 1}、${item.sectionName}</div>
                                <div class="download-btn">下载</div>
                            </div>
                            <div class="section-item-list" id="section-list-${index}">
                                
                            </div
                        </div>
                    `)
                item.subSections.forEach((i, i_index) => {
                    /* 添加章节的内容 */
                    $(`#section-list-${index}`).append(`
                            <div class="section-item">
                                <div class="section-item-title">${index + 1}.${i_index + 1} ${i.sectionName}</div>
                                <div class="section-item-action">
                                    <img src="./image/播放.svg" alt="">

                                </div>
                            </div>

                        `)
                })
            })

            /* 设置课程评论 */
            $.ajax({
                url: `https://showme2.myhope365.com/online_course/pc/comment/commentList/course/${courseId}?pageSize=10&pageNum=1`,
                type: 'get',
                success: (res) => {
                    if (res.code == 0) {
                        console.log(res);
                        $(".course-remark-box").append(`
                <div class="remark-box-header">
                    <span>评论</span>
                    <div class="remark-box-star">
                        <img src="./image/star.svg" alt="">
                        <img src="./image/star.svg" alt="">
                        <img src="./image/star.svg" alt="">
                        <img src="./image/star.svg" alt="">
                        <img src="./image/star.svg" alt="">
                    </div>
                    <div class="remark-textarea">
                        <textarea name="remark" id="" placeholder="请发表您对课程的评价"></textarea>
                    </div>
                    <div class="remark-btn">
                        <button type="button">发表评论</button>
                    </div>
                </div>
                <div class="remark-box-main">
                    <div class="remark-list">
                    </div>
                </div>
                `)

                /* <img src="${item.user.avatarUrl}" alt=""> 这个路径也用不了 */
                        res.rows.forEach((item) => {
                            $(".remark-list").append(`
                        <div class="remark-list-item">
                            <div class="remark-list-item-title">
                                <div class="remark-list-item-title-left">
                                    <img src="../image/favicon.ico" alt="">
                                    <span>${item.user.nickname}123</span>
                                </div>
                                <div class="remark-box-star">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                    <img src="./image/star.svg" alt="">
                                </div>
                            </div>
                            <div class="remark-list-item-content">
                                <p>${item.commentContent}</p>
                            </div>
                            <div class="remark-list-item-footer">
                                <div>
                                    <span>2022-12-29 17:23 </span>
                                    <span>回复</span>
                                </div>
                            </div>
                        </div>    
                    `)
                        })

                    }


                },
                error: (res) => {
                    console.log(res);
                }

            })
        }
    },
    error: (err) => {
        console.log(err);
    }

})



/* 设置底部友情链接 */
$.ajax({
    url: "https://showme2.myhope365.com/online_course/system/dict/data/list/open",
    type: "post",
    data: {
        dictType: "blogroll",
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "dictSort",
        isAsc: "asc"
    },
    success: (res) => {
        // console.log(res);
        res.rows.forEach((item) => {
            $(".second-line").append(`
            
                <a href="${item.dictValue}">${item.dictLabel}</a>
            
            `)
        })
    },
    error: (res) => {
        console.log(res);
    }
})


